<template>
    <div class="shan-1">
        <!-- 这块只是为了调用模板，把首次的值展示出来 -->
        <i>{{newarr}}</i> 

<!-- 朕知道中间的第一个完整的板块 -->
        <div class="shou-tui" >
            <img :src="arr[0].img" alt="">
            <h2>{{arr[0].title}}</h2>
            <div class="shou-p">
                <p>{{arr[0].con1}}</p>
                <p>{{arr[0].con2}}</p>
                <p>{{arr[0].con3}}</p>
                <p>{{arr[0].con4}}</p>
                <p>{{arr[0].con5}}</p>
            </div>

            <div class="button">
                <span @click="del()">&lt;</span>
                <b ref="span">{{count}}&nbsp;/&nbsp;4</b>
                <span @click="add()">&gt;</span>
            </div>
        </div>

       
<!-- 中间下面的板块 -->
<div class="shou-tui" >
            <img :src="arr1[0].img" alt="">
            <h2>{{arr1[0].title}}</h2>
            <div class="shou-p">
                <p>{{arr1[0].con1}}</p>
                <p>{{arr1[0].con2}}</p>
                <p>{{arr1[0].con3}}</p>
                <p>{{arr1[0].con4}}</p>
                <p>{{arr1[0].con5}}</p>
            </div>

            <div class="button">
                <span @click="del1()">&lt;</span>
                <b>{{count1}}&nbsp;/&nbsp;2</b>
                <span @click="add1()">&gt;</span>
            </div>
        </div>



        <!-- 底部垫子 -->
        <div class="zhenbottom">

        </div>
    </div>
</template>

<script>
// 第二个板块直接从mock里面引
import {homelink} from "@/api/axios.js"

export default {
    data(){
        return{
            arr:[],
            count:1,
            arr1:[],
            newarr1:[],
            count1:1
        }
    },
    created(){
        // 获取第一个板块发送请求给后台
        this.$store.dispatch("zhenaxios")


        // 获取下面的板块
        homelink("/zhen/json","get").then((ok)=>{
            console.log(ok.data.arr1)
            this.newarr1 = ok.data.arr1;
            
            this.arr1=this.newarr1.filter((v)=>{
                if(v.id==this.count1){
                    return v
                }
            })
        })

    },
    computed:{
         // 1. 初始就要让他的值呈现，在钩子里面又不能发送和请求回来的写在一起，
                // 并且发送回来的数据要在computed里面写，但是computed里面的函数名，又相当于data变量，又不能传给data变量，只能调用
                // 2. 想让第一次的值呈现就必须调用computed里面写的函数名，所以我也调用了，呈现在了页面，，然后让他隐藏
                // 3. 在computed的中，获取到state中的值，然后对这个值进行过滤，判断id是否与我定义的count值一致，如果一致，把这个值尾插在data变量arr里面，也就是让id=1时的数据直接展现在页面，并且在里面return "",把空的展示在页面
        newarr(){
            return this.$store.state.zhenx.arr.filter((v)=>{
                    if(v.id==1){  
                    this.arr.push(v)
                    //  console.log(this.arr)
                     return ""
                }
           })
        }
    },
    methods:{
        add(){
                // 4. 第一条值完成后，接下来要点击判断别的值了，对数据进行过滤，因为点击之后他是从id=2开始判断的，然后在让arr的值等于他过滤返回的那一条值，这是arr中也还是只有一条数据，把id=1的那条数据替换掉了，之前就已经在页面插入了，他自己就会进行插入
                // 5. 这块如果数据小于4，就让他++，并且，与id对比取回来的值就只有一条，所以要写下标0 (arr[0].img等等，就不能直接遍历了)
                if(this.count<this.$store.state.zhenx.arr.length){
                    this.count++;
                    this.arr = this.$store.state.zhenx.arr.filter((v)=>{
                    if(v.id == this.count){
                        // console.log(v)
                        return v
                    }
                 })
                }else{
                    this.count=4
                }
            },
        del(){
            if(this.count>1){
                this.count--;
                this.arr = this.$store.state.zhenx.arr.filter((v)=>{
                    if(v.id==this.count){
                        // console.log(v)
                        return v
                    }
                })
                console.log(this.arr1)
            }else{
                this.count=1
            }
        },


        // 第二个板块
        add1(){
            if(this.count1<this.newarr1.length){
                this.count1++;
                console.log(this.arr1)
                this.arr1 = this.newarr1.filter((v)=>{
                    if(v.id==this.count1){
                        return v
                    }
                })
            }else{
                this.count1=2
            }
        },
        del1(){
            if(this.count1>1){
                this.count1--;
                console.log(this.arr1)
                this.arr1 = this.newarr1.filter((v)=>{
                    if(v.id==this.count1){
                        return v
                    }
                })
            }else{
                this.count1=1
            }
        },
    
    }
}
</script>

<style scoped>
i{
    display: none;
}
.shan-1{
    width: 100%;
    height: auto;
    display: flex;
    flex-direction: column;

}
.shou-tui{
    width: 3.33rem;
    height: 4.5rem;
    border-radius: 0.1rem;
    text-align: center;
   
   box-shadow: #666 0px 0px 10px;
   margin-top: 0.2rem;
    position: relative;
    /* top: 0.2rem; */
}
.shou-tui h2{
    text-align: left;
    margin: 0.2rem 0;
    font-weight: normal;
}
.shou-tui span{
    display: inline-block;
    width: 0.3rem;
    height: 0.3rem;
    line-height: 0.3rem;
    text-align: center;
    border-radius: 50%;
    background-color: orangered;
    margin: 0 0.1rem;
}
.shou-tui .button{
    position: absolute;
    bottom: 0.2rem;
    left: 50%;
    transform: translateX(-50%);
}



.shou-p{
    text-align: left; 
}
.shou-p p{
    margin: 0.1rem 0.2rem;
}
.zhenbottom{
    width: 100%;
    height: 0.5rem;
}
</style>